<!DOCTYPE html>
<html>
<head>
<title>Web Components Example: Timezone Selection via Image</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700|Droid+Sans+Mono|Ovo" type="text/css">
<link rel="stylesheet" href="../assets/styles/main.css" type="text/css">
<link rel="stylesheet" href="../assets/styles/prettify.css" type="text/css" />
<script src="../assets/scripts/bug-assist.js"></script>
<script src="../assets/scripts/prettify.js"></script>
<meta name="bug.blocked" content="14956">
<meta name="bug.short_desc" content="[Samples]: ">
<meta name="bug.product" content="WebAppsWG">
<meta name="bug.component" content="Component Model">
</head>
<body>
<header>
<ul>
    <li><a href="../samples/index.html">Samples</a></li>
    <li><a href="../explainer/index.html">Explainer</a></li>
    <li><a href="../spec/shadow/index.html">Shadow DOM Spec</a></li>
    <li><a href="../spec/templates/index.html">HTML Templates</a></li>
</ul>
<h2>Web Components Example</h2>
<h1>Timezone Selection via Image</h1>
</header>
<pre class="prettyprint"><code>
&lt;element extends=&quot;select&quot; name=&quot;x-timezone-map&quot; constructor=&quot;MapSelector&quot;&gt;
    &lt;script&gt;
        this.lifecycle({
            created: function(shadowRoot) {
                select = shadowRoot.shadowHost;
                shadowRoot.querySelector(&#x27;#timezoneShapes&#x27;).addEventHandler(&#x27;click&#x27;, function() {
                    if (event.target != this) {
                        select.selectedIndex = select[event.target.id].index;
                        // FIXME: Highlight the timezone.
                    }
                });
                // FIXME: Add &quot;change&quot; listener to adjust currently highlighted timezone.
            }
        });
    &lt;/script&gt;
    &lt;template&gt;
        &lt;svg&gt;
            &lt;g id=&quot;worldShapes&quot;&gt; ... &lt;/g&gt;
            &lt;g id=&quot;timezoneShapes&quot;&gt;
                &lt;path id=&quot;PST&quot; ...&gt;
                &lt;path id=&quot;CST&quot; ...&gt;
            &lt;/g&gt;
            ...
        &lt;/svg&gt;
    &lt;/template&gt;
&lt;/element&gt;
</code></pre>
</body>
</html>